<script setup>
import { ref } from 'vue';
import MenuEl from './menu-el/menu-el.vue';
const a =  ref(window.location.href)
console.log(a);
const show = ref(false)
if(a.value.includes('/login')) {
   show.value = true
}

</script>

<template>
   <div v-if="show">
    <RouterView />
   </div>
   <div class="box" v-else>
    <header>
      <div class="header-top">
        <img class="img" src="/src/assets/log.png" alt="">
      </div>
      <div class="header-main">
        <MenuEl></MenuEl>
      </div>
    </header>

  <main>
     <!-- 页面出口 -->
     <div class="fiexd">
      <div class="main-header">
          <el-button plain>可视化大屏</el-button>
          <el-button type="text">黑马管理员</el-button>
     </div>
     </div>
      <div class="main-mains">
        <RouterView />
      </div>
  </main>
   </div>
</template>

<style scoped>
  .box {
    height: 100vh;
    width: 100vw;
    display: flex;
    background-color: #f4f6f8;
    box-sizing: border-box;
   }
   header {
     max-width: 18vw;
     width: 100%;
     background-color: #fff;
     margin-right: 1vw;
   }
   main {
     flex: 1;
     background-color: #fff;
    }
    .header-top {
      height: 60px;
      width: 100%;
    }
    /* .header-main {
      height: 100%;
    } */
    .img {
      width: 100%;
      height: 60px;
    }
    .fiexd {
      position: fixed;
      width: 81vw;
      height: 60px;
      right: 0;
      top:0 ;
    }
    .main-header {
      width: 100%;
      height: 60px;
      background-color: #f4f6f8;
      display: flex;
      justify-content: right;
      padding: 15px 30px;
    }
    .main-mains {
      width: 100%;
      height: 100%;
      padding-top: 62px;
    }

</style>